<template>
	<view class="order-detail-container">
		<view class="order-top-message">
			<view class="order-status">
				<!-- 交易成功 -->
				<text v-if="orderInfo.orderState === -1">交易关闭</text>
				<text v-if="orderInfo.orderState === 0">待付款</text>
				<text v-if="orderInfo.orderState === 1">待发货</text>
				<text v-if="orderInfo.orderState === 2">待收货</text>
				<text v-if="orderInfo.orderState === 3">交易成功</text>
			</view>
			<view class="order-tip">
				感谢您对优转的信任，期待您再次选择
			</view>
		</view>
		<view class="order-middle-info">
			<view class="way-address">
				<view class="way">
					<view class="way-left">
						普通发货
					</view>
					<view class="way-right">
						约6天到
					</view>
				</view>
				<view class="address">
					<i class="iconfont icon-address1"></i>
					<view class="address-right">
						<view class="top">
							<view class="buyer">
								<!-- 小黑子 -->
								{{ orderInfo.buyerName }}
							</view>
							<view class="phone">
								<!-- 130****0028 -->
								{{ orderInfo.phone }}
							</view>
						</view>
						<view class="bottom">
							<view class="address-content">
								<!-- 广东省清远市清城区广东南华工商职业学院 -->
								{{ orderInfo.buyerAddr }}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="goods-info">
				<view class="store-info" @click="gotoStore">
					<view class="store-left">
						<view class="store-pic">
							<image v-if="store.logo" :src="$imageUrl + store.logo"></image>
						</view>
						<view class="store-name">
							<!-- Nike -->
							{{ orderInfo.storeName }}
						</view>
					</view>
					<view class="store-right">
						<text>进入店铺</text>
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
				<view class="goods-box">
					<view class="goods-left">
						<image v-if="orderInfo.goodsImg" :src="$imageUrl + orderInfo.goodsImg"></image>
					</view>
					<view class="goods-right">
						<view class="wrapper">
							<view class="goods-name">
								<!-- Air Force 1 Low Shadow 防滑减震耐磨 低帮 板鞋 女款 黑白红 -->
								{{ orderInfo.goodsName }}
							</view>
							<view class="goods-setting">
								<!-- 44 数量×1 -->
								{{ orderInfo.goodsOptions }} 数量×{{ orderInfo.goodsCount }}
							</view>
						</view>
						<view class="goods-price">
							<!-- <text>￥1286.29</text> -->
							<text>￥{{ orderInfo.goodsPrice * orderInfo.goodsCount }}</text>
						</view>
					</view>
				</view>
				<view class="goods-bottom">
					实付款:<text>￥{{ orderInfo.goodsPrice * orderInfo.goodsCount }}</text>
				</view>
			</view>
			
			<view class="order-info">
				<view class="title">
					订单信息
				</view>
				<view class="content-box">
					<view class="content-label">
						订单编号
					</view>
					<view class="content-value">
						<!-- 11013042350142415 -->
						{{ orderInfo.orderId }}
					</view>
				</view>
				<view class="content-box">
					<view class="content-label">
						创建时间
					</view>
					<view class="content-value">
						<!-- 2023-04-23 19:41:11 -->
						{{ orderInfo.createTime }}
					</view>
				</view>
				<view class="content-box">
					<view class="content-label">
						支付方式
					</view>
					<view class="content-value">
						微信支付
					</view>
				</view>
			</view>
		</view>
		<view class="order-bottom-btn">
			<view class="delete btn" v-if="orderInfo.orderState !== 1" @click="delOrder">
				<!-- 删除订单 -->
				<text v-if="orderInfo.orderState === 0">去付款</text>
				<text v-if="orderInfo.orderState === 2">确认收货</text>
				<text v-if="orderInfo.orderState === 3 || orderInfo.orderState === -1">删除订单</text>
			</view>
			<view class="comment btn" v-if="orderInfo.orderState === 0 || orderInfo.orderState === 1"  @click="cancelOrder">
				取消订单
			</view>
			<view class="comment btn" v-if="orderInfo.orderState === 3">
				评价
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {},
				store: {}
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.orderDetail()
		},
		computed: {
			...mapState('module_user', ['userinfo'])
		},
		methods: {
			async orderDetail() {
				const { data: res } = await uni.$http.get(`/user/orders`, { orderId: this.orderId, userId: this.userinfo.id })
				this.orderInfo = res.data[0]
				console.log(this.orderInfo.goodsId);
				const { data: res2 } = await uni.$http.get(`/stores/goods/${this.orderInfo.goodsId}`)
				this.store = res2.data
			},
			gotoStore() {
				console.log(this.store);
				uni.navigateTo({
					url: `/subcontract/store/store?storeId=${this.store.id}`
				})
			},
			delOrder() {
				if(this.orderInfo.orderState === -1 || this.orderInfo.orderState === 3) {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: async (res) => {
							if (res.confirm) {
								const { data: res2 } = await uni.$http.put(`/user/orders`, { orderId: this.orderInfo.orderId, status: 0})
								if(res2.code === 200) {
									let pages = getCurrentPages()
									let beforePage = pages[pages.length - 2]; // 上一页
									// beforePage.$vm.data
									uni.navigateBack({
									    success: () => {
									        beforePage.getAllTypeOrder();
									    }
									})
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}else if(this.orderInfo.orderState === 2) {
					uni.showModal({
						title: '提示',
						content: '确认收货',
						success: async (res) => {
							if (res.confirm) {
								this.orderInfo.orderState = 3
								const { data: res2 } = await uni.$http.put(`/user/orders`, JSON.parse(JSON.stringify(this.orderInfo)))
								if(res2.code === 200) {
									let pages = getCurrentPages()
									let beforePage = pages[pages.length - 2]; // 上一页
									// beforePage.$vm.data
									uni.navigateBack({
									    success: () => {
									        beforePage.getAllTypeOrder();
									    }
									})
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}else if(this.orderInfo.orderState === 0 ) {
					
				}
			},
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确认取消',
					success: async (res) => {
						if (res.confirm) {
							this.orderInfo.orderState = -1
							const { data: res2 } = await uni.$http.put(`/user/orders`, JSON.parse(JSON.stringify(this.orderInfo)))
							if(res2.code === 200) {
								let pages = getCurrentPages()
								let beforePage = pages[pages.length - 2]; // 上一页
								console.log(beforePage);
								// beforePage.$vm.data
								uni.navigateBack({
								    success: () => {
								        beforePage.getAllTypeOrder();
								    }
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.order-detail-container {
	width: 100%;
	// height: 100%;
	padding-bottom: 60px;
	.order-top-message {
		width: 100%;
		height: 25%;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #2b2d3c;
		.order-status {
			color: #fff;
			font-size: 20px;
			letter-spacing: 8rpx;
		}
		.order-tip {
			margin-top: 20rpx;
			color: #c5c8d1;
			font-size: 12px;
			letter-spacing: 4rpx;
		}
	}
	.order-middle-info {
		position: relative;
		z-index: 888;
		top: -12%;
		padding: 20rpx;
		box-sizing: border-box;
		.way-address {
			border-radius: 8rpx;
			background-color: #fff;
			// padding: 20rpx;
			box-sizing: border-box;
			// margin-bottom: 20rpx;
			.way {
				display: flex;
				padding: 30rpx;
				font-weight: bold;
				font-size: 14px;
				border-bottom: 1px solid #f0f0f0;
				justify-content: space-between;
			}
			.address {
				display: flex;
				padding: 30rpx;
				.iconfont {
					margin-right: 20rpx;
					padding-top: 2rpx;
				}
				.top {
					display: flex;
					font-size: 14px;
					font-weight: bold;
					.buyer {
						margin-right: 20rpx;
					}
				}
				.bottom {
					margin-top: 20rpx;
					font-size: 12px;
					color: #999;
					letter-spacing: 4rpx;
				}
			}
		}
	}
}
.goods-info {
	width: 100%;
	margin: 20rpx 0;
	border-radius: 8rpx;
	background-color: #fff;
	.store-info {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		.store-left {
			display: flex;
			font-size: 12px;
			align-items: center;
		}
		.store-pic {
			width: 25px;
			height: 25px;
			margin-right: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.store-right {
			display: flex;
			font-size: 12px;
			align-items: center;
		}
	}
	.goods-box {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
		.goods-left {
			width: 80px;
			height: 80px;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.goods-right {
			width: 70%;
			display: flex;
			justify-content: space-between;
			.wrapper {
				width: 70%;
			}
			.goods-name {
				font-size: 12px;
				overflow: hidden; //多出的隐藏
				text-overflow: ellipsis;//多出部分用...代替
				display: -webkit-box; //定义为盒子模型显示
				-webkit-line-clamp: 3; //用来限制在一个块元素显示的文本的行数
				-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
			}
			.goods-setting {
				color: #999;
				font-size: 12px;
				margin-top: 10rpx;
			}
			.goods-price {
				font-size: 13px;
				text-align: center;
				font-weight: bold;
			}
		}
	}
	.goods-bottom {
		padding: 30rpx;
		text-align: end;
		font-size: 13px;
		text {
			font-size: 16px;
			font-weight: bold;
		}
	}
}
.order-info {
	padding: 30rpx;
	background-color: #fff;
	border-radius: 8rpx;
	.title {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	.content-box {
		display: flex;
		font-size: 12px;
		color: #999;
		justify-content: space-between;
		.content-label {
			letter-spacing: 4rpx;
		}
		&:not(:last-child) {
			margin-bottom: 30rpx;
		}
	}
}

.order-bottom-btn {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: flex;
	height: 60px;
	align-items: center;
	background-color: #fff;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 0 20rpx;
	border-top: 1px solid #f0f0f0;
	.btn {
		border: 1px solid #d0d0d0;
		font-size: 14px;
		text {
			width: 100px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			display: inline-block;
		}
	}
	.delete {
		width: 100px;
		height: 40px;
		text-align: center;
		line-height: 40px;
	}
	.comment {
		width: 100px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		margin-left: 20rpx;
	}
}
</style>
